<template>
  <el-descriptions
      title="门店信息"
      :column="1"
      size="large"
      border
      style="width: 50%"
  >
    <template #extra>
      <el-button type="primary" @click="store.addStoreFormVisible=true">新建门店</el-button>
    </template>
    <el-descriptions-item label="门店ID" label-align="center" width="0px">
      {{store.getLocalCurrentStoreMain().storeId}}
    </el-descriptions-item>
    <el-descriptions-item label="门店名称" label-align="center" width="0px">
      {{store.getLocalCurrentStoreMain().name}}
    </el-descriptions-item>
    <el-descriptions-item label="联系电话" label-align="center" width="0px">
      <el-row>
        <div v-if="isEdit">
          <el-input v-model="tel"/>
        </div>
        <div v-else>
          {{ store.getLocalCurrentStoreMain().tel }}
        </div>
        <div style="margin-left: 10%">
          <el-button v-if="isEdit" type="primary"  @click="updateTel">确定</el-button>
          <el-button v-else @click="isEdit=true">编辑</el-button>
        </div>
      </el-row>

    </el-descriptions-item>
    <el-descriptions-item label="门店地址" label-align="center" width="0px">
      {{store.getLocalCurrentStoreMain().address}}
    </el-descriptions-item>
    <el-descriptions-item label="管理员" label-align="center" width="0px">
      {{ store.getLocalCurrentStoreMain().userId}}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
import {store} from "@/store";
import {ref} from "vue";
import request from "@/utils/request";

const isEdit=ref(false)
const tel=ref(store.getLocalCurrentStoreMain().tel)
const updateTel = () => {
  let storeMain=store.getLocalCurrentStoreMain()
  storeMain.tel=tel.value
  request.post("/store/update/store",storeMain).then(res=>{
    store.setLocalStorage("currentStoreMain",storeMain)
    isEdit.value=false
  })

}
</script>

<style scoped>

</style>